<template>
  <div>
    <!-- 文件选择按钮 -->
    <label>
      导入Excel
      <input 
        type="file" 
        accept=".xlsx,.xls" 
        @change="handleFileSelect"
      >
    </label>
    
    <button @click="downloadTemplate">下载模板文件</button>

    <!-- 水平滚动容器 -->
    <div class="table-container">
      <!-- 表格表单 -->
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>物料号</th>
            <th>图号</th>
            <th>物料描述</th>
            <th>尺寸</th>
            <th>净重</th>
            <th>数量</th>
            <th>典型工件</th>
            <th>父项</th> 
            <th>厂家报价</th> 
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="items.length > 0">
          <tr v-for="(item, index) in items" :key="index">
            <td>{{ index + 1 }}</td>
            <!-- 物料号输入框 -->
            <td>
              <input 
                v-model="item.code" 
                type="text" 
                placeholder="物料号"
              >
            </td>
            <!-- 图号输入框 -->
            <td>
              <input 
                v-model="item.drawingNo" 
                type="text" 
                placeholder="图号"
              >
            </td>
            <!-- 物料描述输入框 -->
            <td>
              <input 
                v-model="item.name" 
                type="text" 
                placeholder="物料名"
              >
            </td>
            <!-- 尺寸输入框 -->
            <td>
              <input 
                v-model="item.size" 
                type="text" 
                placeholder="尺寸"
              >
            </td>
            <!-- 净重输入框 -->
            <td>
              <input 
                v-model="item.weight" 
                type="number" 
                step="0.01"
                placeholder="净重"
              >
            </td>
            <!-- 数量输入框 -->
            <td>
              <input 
                v-model="item.count" 
                type="number" 
                min="1"
                placeholder="数量"
              >
            </td>
            <!-- 典型工件下拉框 -->
            <td>
              <select v-model="item.commonpart" >
                <option value="">请选择</option>
                <option 
                  v-for="part in commonparts" 
                  :key="part._id" 
                  :value="part"
                >
                  {{ part.name }}
                </option>
              </select>
            </td>
            
            <!-- 新增：父项下拉框（来自本地数组） -->
            <td>
              <select v-model="item.parent" v-if="!item.commonpart?.asm?.tag">
                <option value="">请选择</option>
                <option 
                  v-for="p in parents" 
                  :key="p._id" 
                  :value="p._id"
                >
                  {{ p.label }}
                </option>
              </select>
              <span v-else>父项</span>
            </td>
            <!-- 厂家报价 -->
            <td>
              <input 
                v-if="!item.parent"
                v-model="item.price" 
                type="number" 
                min="1"
                placeholder="厂家报价"
              >
            </td>
            <!-- 删除按钮 -->
            <td>
              <button @click="removeItem(index)">删除</button>
            </td>
          </tr>
        </tbody>
        <tbody v-else>
          <tr>
            <td colspan="11">暂无数据，请添加物料或导入Excel文件</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加物料按钮 -->
    <button @click="addItem">添加物料</button>
    <button @click="console.log(items)">print</button>
    <button @click="console.log(parents)">printParent</button>
    <button @click="submitForm">提交</button>

    <!-- 状态提示 -->
    <p v-if="importSuccess">导入成功！已成功导入 {{ importCount }} 条数据</p>
    <p v-if="errorMessage" style="color: red;">{{ errorMessage }}</p>
    <p v-if="loadingParts ">加载选项中...</p>
    <p v-if="partError " style="color: red;">
      {{ partError }} 
    </p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// import * as XLSX from 'xlsx'

async function downloadTemplate() {
  try {
    // 调用服务端 API，指定响应类型为 blob（二进制文件）
    const response = await $fetch('/api/hejia/download-input-template', {
      method: 'GET',
      responseType: 'blob',
    });

    // 触发浏览器下载
    const url = URL.createObjectURL(response);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'InputTemplate.xlsx'; // 文件名需与服务端响应头一致（或自定义）
    a.click();
    URL.revokeObjectURL(url); // 释放内存
  } catch (error) {
    console.error('模板下载失败：', error);
  }
}

const submitForm = async ()=>{
   try {
    const asmMap = new Map()
    const dataToSubmit = []

    items.value.forEach(element => {
      if(element.commonpart.asm.tag){
        element.children = []
        asmMap.set(element.code,element)
      }
    });

    items.value.forEach(element => {
      if(element.parent){
        const parent = asmMap.get(element.parent)
        parent.children.push(element)
      }else if( !element.commonpart.asm.tag){
        dataToSubmit.push(element)
      }
    });

    asmMap.forEach((value)=> {
      dataToSubmit.push(value)
    })

    // 2. 调用API，指定响应类型为blob（二进制文件）
    const response = await $fetch('/api/hejia/receive-fill-return', {
      method: 'POST',
      body: dataToSubmit,
      responseType: 'blob' // 关键：必须指定为blob
    });

    // 3. 触发浏览器下载
    const url = URL.createObjectURL(response);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'result.xlsx'; // 文件名与后端响应头一致
    a.click();
    URL.revokeObjectURL(url); // 释放内存

  } catch (error) {
    console.error('下载失败：', error.data?.message || error.message);
    alert(`生成失败：${error.data?.message || '未知错误'}`);
  }
}

const items = ref([])

// 典型工件选项（从API获取）
const commonparts = ref([])
const loadingParts = ref(false)
const partError = ref('')


// 新增：父项选项（本地数组）
const parents = computed(()=>{
  return items.value.filter(item => item.commonpart?.asm?.tag)
  .map(item => {
    return {
      _id :item.code,
      label:`${item.drawingNo} ${item.name}`
    }
  })
})

// 导入状态
const importSuccess = ref(false)
const importCount = ref(0)
const errorMessage = ref('')

// 组件挂载时获取选项数据
onMounted(async() => {
  await fetchCommonparts()
})

// 从API获取典型工件选项
const fetchCommonparts = async () => {
  try {
    loadingParts.value = true
    partError.value = ''
    
    const response = await fetch('/api/commonpart')
    if (!response.ok) {
      throw new Error('获取典型工件失败')
    }
    
    const data = await response.json()
    commonparts.value = data
    console.log(commonparts)
  } catch (err) {
    partError.value = err.message || '加载典型工件时发生错误'
    console.error('获取典型工件失败:', err)
  } finally {
    loadingParts.value = false
  }
}


// 添加新物料行
const addItem = () => {
  items.value.push({
    code: '',
    drawingNo: '',    
    name: '',
    count: '',
    size: '',
    sizeArr: [],  
    weight: ''
  })
}

// 移除物料行
const removeItem = (index) => {
  if (items.value.length > 1) {
    items.value.splice(index, 1)
  } else {
    items.value = [{code: '',
    drawingNo: '',    
    name: '',
    count: '',
    size: '',
    sizeArr: [],  
    weight: ''
   }]
  }
}


/**
 * 处理文件选择事件
 * @param {Event} e - 文件选择事件
 */
const handleFileSelect = async (e) => {
  // 1. 获取选中的文件（只取第一个文件）
  const file = e.target.files[0];
  if (!file) return; // 未选择文件则退出

  // 2. 验证文件类型（双重保险，避免用户绕过accept属性）
  const fileExtension = file.name.split('.').pop().toLowerCase();
  if (!['xlsx', 'xls'].includes(fileExtension)) {
    alert('请上传.xlsx或.xls格式的Excel文件');
    e.target.value = ''; // 清空选择，避免重复触发
    return;
  }

  try {
    // 3. 创建FormData对象，包装文件数据（文件上传必须用FormData）
    const formData = new FormData();
    formData.append('excelFile', file); // 键名"excelFile"需与后端接收时一致

    // 4. 上传文件到后端API
    const response = await $fetch('/api/hejia/import-excel', {
      method: 'POST',
      body: formData, // 直接传递FormData对象
      // 无需手动设置Content-Type，浏览器会自动添加multipart/form-data头
    });

    // 5. 处理后端返回的成功数据
    console.log('导入成功，后端返回数据：', response);
    items.value = response.data
    alert('文件导入成功！');
  } catch (error) {
    // 6. 处理错误（如后端返回的错误信息）
    console.error('导入失败：', error.data || error.message);
    alert(`导入失败：${error.data?.message || '网络错误'}`);
  } finally {
    // 清空input值，确保下次选择同一文件也能触发change事件
    e.target.value = '';
  }
};


// 物料数据数组（新增material和parentItem字段）
// const items = ref([
//   {
//     code: '000001',
//     drawingNo: 'DRAW0001',    
//     name: '件1',
//     count: 1,
//     size: '1100 10x10',       
//     sizeArr: [ 1100, 10, 10 ],    weight: 1
//   },
//   {
//     code: '000002',
//     drawingNo: 'DRAW0002',    
//     name: '件2',
//     count: 1,
//     size: '10992x10x11',      
//     sizeArr: [ 10992, 10, 11 ],
//     weight: 2
//   },
//   {
//     code: '000003',
//     drawingNo: 'DRAW0003',    
//     name: '件3',
//     count: 1,
//     size: '1022x10x12',       
//     sizeArr: [ 1022, 10, 12 ],    weight: 3
//   },
//   {
//     code: '000004',
//     drawingNo: 'DRAW0004',    
//     name: '件4',
//     count: 1,
//     size: '10x10x13',
//     sizeArr: [ 10, 10, 13 ],  
//     weight: 4
//   },
//   {
//     code: '000005',
//     drawingNo: 'DRAW0005',    
//     name: '件5',
//     count: 1,
//     size: '10x10x214',        
//     sizeArr: [ 10, 10, 214 ], 
//     weight: 5
//   },
//   {
//     code: '000006',
//     drawingNo: 'DRAW0006',    
//     name: '件6',
//     count: 1,
//     size: '10x1000X15',       
//     sizeArr: [ 10, 1000, 15 ],    weight: 6
//   },
//   {
//     code: '000007',
//     drawingNo: 'DRAW0007',    
//     name: '件7',
//     count: 1,
//     size: '10x10x16',
//     sizeArr: [ 10, 10, 16 ],  
//     weight: 7
//   },
//   {
//     code: '000008',
//     drawingNo: 'DRAW0008',    
//     name: '件8',
//     count: 1,
//     size: '10x10x17',
//     sizeArr: [ 10, 10, 17 ],  
//     weight: 8
//   },
//   {
//     code: '000009',
//     drawingNo: 'DRAW0009',    
//     name: '件9',
//     count: 1,
//     size: '10x10x18',
//     sizeArr: [ 10, 10, 18 ],  
//     weight: 9
//   },
//   {
//     code: '000010',
//     drawingNo: 'DRAW0010',    
//     name: '件10',
//     count: 1,
//     size: '10x10x19',
//     sizeArr: [ 10, 10, 19 ],  
//     weight: 10
//   }
// ])
</script>

<style scoped>
/* 水平滚动容器样式 */
.table-container {
  overflow-x: auto;
  max-width: 100%;
  margin: 10px 0;
}

/* 表格最小宽度设置 */
table  {
  min-width: 1000px; /* 增加最小宽度以适应新增列 */
  width: 100%;
  border: solid 1px black;
}

tr td th{
  border: solid 1px black;
}

/* 输入框和选择框样式 */
input, select {
  width: 120px;
  box-sizing: border-box;
}
</style>


